
import Title from "../Title"
import Datas from '@/assets/data.png'
import Tab from '@/components/Tab'
import { useState } from "react";
import { Types, en } from './types'
import styles from './styles.module.scss'
import { useAsyncEffect, useCreation, useMemoizedFn, useRequest } from "ahooks";
import { getScoreBoardData } from '@/server/news'
import RenderJudge from "../RenderJudge";
const Scoreboard = ({ matchList }) => {
  const [tabselect, setTabselect] = useState(matchList[0]);// 顶部的选中的数据
  const SecondList = (current) => {
    if (current.compName === 'NBA') return Types.NBA
    if (current.compName === 'CBA') return Types.CBA
    if (current.matchType === 1) return Types.football
  }


  const [selectType, setSelectType] = useState(SecondList(tabselect)[0])

  const [blockData, setBlockData] = useState(null)
  const { runAsync } = useRequest(getScoreBoardData, {
    onSuccess: (res, [id, type]) => {
      setBlockData(res)
    },
    manual: true
  })
  const changeTab = useMemoizedFn(async (value) => {
    setTabselect(value)
    setSelectType(SecondList(value)[0])
    await runAsync(value.id, SecondList(value)[0].value)
  })


  useAsyncEffect(async () => {
    await runAsync(matchList[0].id, SecondList(tabselect)[0]?.value)
  }, [])

  const chaneSecondTab = async (row) => {
    setSelectType(row)
    await runAsync(tabselect.id, row.value)
  }


  const BlockFilterData = useCreation(() => {
    if (blockData?.length === 0) return []
    if ([3, 4, 5].includes(selectType.value)) {
      //篮球的得分榜
      return blockData
    }
    if (tabselect.compName === 'NBA' && blockData?.tables) {
      if ([-1, -2].includes(selectType.value)) {
        //东部和西部数据
        const maxArray = blockData?.tables.map((item) => item.scope);
        const newScopeIndex = Math.max(...maxArray);// scope表示处于什么赛季，取最大的数为最新赛季
        const data = blockData?.tables.filter((item) => item.scope === newScopeIndex);
        return [...(data?.filter((item) => item.name === selectType.name)[0]?.rows || [])];
      }
    }
    if (tabselect.compName === 'CBA' && blockData?.tables) {
      if (selectType.value === 1) {
        return blockData?.tables[0]?.rows || []
      }
    }



    if (tabselect.matchType === 1) {
      if (tabselect.compName === '世界杯') {
        return blockData?.tables
      }
      //足球
      if (selectType.value === 1 && blockData?.tables) {
        return blockData?.tables[0]?.rows
      }
      if (selectType.value === 2) {
        return blockData
      }
    }
    return []
    //其余的足球
  }, [selectType, blockData, tabselect])
  console.log(BlockFilterData, 'SSSSSSS')



  const SpecialTab = ({ style }) => (
    <>
      <RenderJudge value={tabselect.matchType === 1 && [1].includes(selectType.value)} active={
        <div className={styles.basketball} style={style}>
          <span>排名</span>
          <span>球队</span>
          <span>胜/平/负</span>
          <span>积分</span>
        </div>
      } />


      <RenderJudge value={tabselect.matchType === 1 && [2].includes(selectType.value)} active={
        <div className={styles.basketball} style={style}>
          <span>排名</span>
          <span>球员</span>
          <span>球队</span>
          <span>进球</span>
        </div>
      } />
    </>
  )

  const SpecialFootballInfo = ({ item }) => (
    <>
      <RenderJudge value={[1].includes(selectType.value)} active={
        <li className={styles.blockdata} key={item.team_id}>
          <span>{item.position}</span>
          <span>
            <img src={item.team_logo} alt={item?.team_name} loading="lazy" />
            <i className="textoverone">{item.team_name}</i>
          </span>
          <span style={{ marginLeft: 40, width: 60, textAlign: "center" }} >{(item?.won || 0) + '/' + (item?.draw || 0) + '/' + (item?.loss || 0)}</span>
          <span style={{ marginRight: 32, marginLeft: "auto" }}>
            {item?.points}
          </span>
        </li>
      } />

      <RenderJudge value={[2].includes(selectType.value)} active={
        <li className={styles.bullockSp} key={item?.teamId}>
          <span>{item.position}</span>
          <span className="textoverone">{item?.player?.name_zh}</span>
          <span >
            <img src={'https://cdn.sportnanoapi.com/football/team/' + item?.team?.logo} alt="" />
            <i className="textoverone">{item?.team?.name_zh}</i>
          </span>
          <span>{item.goals}</span>
        </li>
      } />
    </>
  )

  return (
    <>
      <Title img={Datas} text="数据榜"></Title>
      <blockquote style={{ height: 16 }}></blockquote>
      <section className={styles.scoreboard}>
        <Tab matchList={matchList} tabselect={tabselect} setTabselect={changeTab}></Tab>
        <ul className={styles.secondTab}>
          {
            SecondList(tabselect)?.map((row, index) => (
              <RenderJudge key={index} value={row?.value !== 's'} active={
                <li onClick={() => chaneSecondTab(row)} className={row?.value === selectType.value ? styles.active : null}>
                  {row?.name}
                </li>
              } />
            ))
          }
        </ul>
      </section>


      <section className={styles.blockPannier}>
        <section className={styles.topTitle}>
          <RenderJudge value={tabselect.matchType === 2 && [-1, -2, 1].includes(selectType.value)} active={
            <div className={styles.basketball}>
              <span>排名</span>
              <span>球队</span>
              <span>胜</span>
              <span>负</span>
              <span>胜率</span>
            </div>
          } />


          <RenderJudge value={tabselect.matchType === 2 && [3, 4, 5].includes(selectType.value)} active={
            <div className={styles.basketball}>
              <span>排名</span>
              <span>球员</span>
              <span>球队</span>
              <span>场均</span>
            </div>
          } />
          <RenderJudge value={tabselect?.compName === '世界杯'} inactive={<SpecialTab />} />
        </section>
        <ul className={styles.scroll}>
          {BlockFilterData?.length > 0 && BlockFilterData?.map((item, index) => (
            <>
              <RenderJudge key={item?.id} value={tabselect.matchType === 2} active={
                <>
                  <RenderJudge value={[-1, -2, 1].includes(selectType.value)} active={
                    <li className={styles.blockdata} key={item.team_id}>
                      <span>{item.position}</span>
                      <span>
                        <img src={item.team_logo} alt={item?.team_name} loading="lazy" />
                        <i className="textoverone">{item.team_name}</i>
                      </span>
                      <span>{item?.won || 0}</span>
                      <span>{item?.lost || 0}</span>
                      <span>
                        {(Number(item.won_rate) * 100).toFixed(0)}
                        %
                      </span>
                    </li>
                  } />

                  <RenderJudge value={[3, 4, 5].includes(selectType.value)} active={
                    <li className={styles.bullockSp} key={item?.teamId}>
                      <span>{index + 1}</span>
                      <span className="textoverone">{item?.playerName}</span>
                      <span >
                        <img src={item?.teamLogo} alt="" />
                        <i className="textoverone">{item?.teamName}</i>
                      </span>
                      <span>
                        {
                          selectType.value === 3 ? item?.avgPoint : selectType.value === 4 ? item?.avgAssists : selectType.value === 5 ? item?.avgRebounds : ''
                        }
                      </span>
                    </li>
                  } />
                </>
              } />
              <RenderJudge key={item?.id} value={tabselect.matchType === 1} active={
                <>
                  <RenderJudge value={tabselect?.compName === '世界杯'} inactive={
                    <SpecialFootballInfo item={item} />
                  } active={
                    <>
                      <p style={{ textTransform: "uppercase", marginTop: 15, textAlign: "center" }}>{en[item?.group - 1]}</p>
                      <SpecialTab />
                      {
                        item?.rows?.map(value => (
                          <SpecialFootballInfo item={value} key={value?.id} />
                        ))
                      }
                    </>
                  } />
                </>
              } />
            </>
          ))}
        </ul>
      </section>
    </>
  )
}


export default Scoreboard